<template>
  <!-- 企业管理 -->
  <div class="companys" style="padding: 20px">
    <el-card>
      <!-- 搜索 -->
      <el-form label-width="80px">
        <el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="标签名称">
                <el-input
                  v-model="companysDaTa.tags"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <el-select
                  v-model="companysDaTa.province"
                  placeholder="请选择"
                  style="width:100%"
                  @change="provinceChange"
                >
                  <el-option
                    v-for="(item, index) in provinces"
                    :key="index"
                    :value="item"
                    :label="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="地区">
                <el-select
                  v-model="companysDaTa.city"
                  placeholder="请选择"
                  style="width:100%"
                >
                  <el-option
                    v-for="(item, index) in citys"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="companysDaTa.shortName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="状态">
                <el-select
                  v-model="companysDaTa.isFamous"
                  placeholder="请选择"
                  style="width:100%"
                >
                  <el-option label="启用" value="true"></el-option>
                  <el-option label="禁用" value="false"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin-left: 35px">
              <el-button @click="clearClick">清除</el-button>
              <el-button type="primary" @click="seacherClick">搜索</el-button>
            </el-col>
            <el-row type="flex" justify="end">
              <el-col :span="2">
                <el-button
                  class="add_new_users"
                  type="success"
                  icon="el-icon-edit"
                  @click="showDialog = true"
                  >新增用户</el-button
                >
              </el-col>
            </el-row>
          </el-row>
        </el-row>
      </el-form>
      <el-alert :title="title" type="info" show-icon> </el-alert>
      <!-- table -->
      <el-table :data="tableData" style="width: 100%;margin-top:30px">
        <el-table-column type="index" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="number" label="企业编号" align="center">
        </el-table-column>
        <el-table-column prop="shortName" label="企业简称" align="center">
        </el-table-column>
        <el-table-column prop="tags" label="标签" align="center">
        </el-table-column>
        <el-table-column prop="creatorID" label="创建者" align="center">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" align="center">
        </el-table-column>
        <el-table-column prop="remarks" label="备注" align="center">
        </el-table-column>
        <el-table-column prop="state" label="状态" align="center">
          <template v-slot:default="{ row }">
            {{ row.state === 1 ? '启用' : '禁用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200px">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              plain
              circle
              @click="editClick(row)"
            />
            <el-tooltip content="禁用" placement="top">
              <el-button
                v-if="row.state"
                type="warning"
                icon="el-icon-close"
                plain
                circle
                @click="disableClick(row)"
              />
              <el-button
                v-else
                type="success"
                icon="el-icon-check"
                plain
                circle
                @click="disableClick(row)"
              />
            </el-tooltip>

            <el-button
              type="danger"
              icon="el-icon-delete"
              plain
              circle
              @click="delClick(row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end" style="margin-top:20px">
        <el-pagination
          background
          layout=" prev, pager, next,sizes,jumper"
          :total="total"
          :page-sizes="[10, 20, 30]"
          :page-size="page.pagesize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-row>
      <!-- 弹出层 -->
      <add-company
        v-if="showDialog"
        :addForm="addForm"
        :showDialog.sync="showDialog"
        @btnOk="getCompanysList"
        @onClose="onClose"
      />
    </el-card>
  </div>
</template>

<script>
import {
  getCompanysList,
  delCompanysList,
  stateCompanysList
} from '@/api/companys'
import addCompany from './components/addCompany.vue'
import { provinces, citys } from '@/api/citys'
export default {
  components: { addCompany },
  name: 'companys',
  data() {
    return {
      companysDaTa: {
        tags: '',
        city: '',
        province: '',
        shortName: '',
        isFamous: ''
      },
      tableData: [],
      page: {
        page: 1,
        pagesize: 10
      },
      total: 0,
      title: '共0条记录',
      showDialog: false,
      addForm: {
        shortName: '', // 	企业名
        company: '', // 	所属公司
        province: '', // 		省份
        city: '', // 		城市
        tags: '', // 	标签
        remarks: '' // 		备注
      },
      provinces: [],
      citys: []
    }
  },
  created() {
    this.getCompanysList()
    this.provinces = provinces()
    // console.log(this.provinces)
  },
  methods: {
    // 获取table的数据
    async getCompanysList() {
      const { data } = await getCompanysList(this.page)
      this.tableData = data.items
      this.total = data.counts
      this.title = `共 ${this.total} 条记录`
    },
    // 分页
    handleSizeChange(newPageSize) {
      this.page.pagesize = newPageSize
      this.getCompanysList()
    },
    handleCurrentChange(newPage) {
      this.page.page = newPage
      this.getCompanysList()
    },
    editClick(data) {
      this.addForm = data
      this.showDialog = true
    },
    // 删除
    delClick(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return delCompanysList(id)
        })
        .then(() => {
          this.getCompanysList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 修改状态
    async disableClick(data) {
      // console.log(data)
      if (data.state) {
        data.state = 0
      } else {
        data.state = 1
      }
      await stateCompanysList(data)
      this.$message.success('操作成功')
    },
    onClose() {
      this.addForm = {
        shortName: '', // 	企业名
        company: '', // 	所属公司
        province: '', // 		省份
        city: '', // 		城市
        tags: '', // 	标签
        remarks: '' // 		备注
      }
    },
    provinceChange(value) {
      this.companysDaTa.city = ''
      this.citys = citys(value)
      // console.log(this.citys)
    },
    async seacherClick() {
      const { data } = await getCompanysList(this.companysDaTa)
      // console.log(data)
      this.tableData = data.items
      // console.log(res)
      // this.getCompanysList()

      // console.log(this.companysDaTa)
      // console.log(this.getCompanysList())
    },
    clearClick() {
      this.companysDaTa = {
        tags: '',
        city: '',
        province: '',
        shortName: '',
        isFamous: ''
      }
      this.getCompanysList()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep label {
  font-weight: 700;
}
::v-deep.el-input__inner {
  height: 32px;
}
.add_new_users {
  position: absolute;
  right: 8px;
}
::v-deep .el-table th.el-table__cell {
  color: #909399;
  background-color: #fafafa;
  border-bottom: 2px solid #e8e8e8;
}
</style>
